import React, { useState } from 'react'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import { ConfigProvider, Tabs, TabPane } from '@nutui/nutui-react-taro'
import './index.scss'

function Index() {
  const [activeTab, setActiveTab] = useState('0')
  const [searchValue, setSearchValue] = useState('')

  // 模拟数据 - 推荐笔记
  const recommendedPosts = [
    {
      id: 1,
      author: {
        id: 101,
        nickname: '露营达人',
        avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
      },
      content: '周末和朋友一起去了青山绿水营地，风景太美了，分享一些照片！',
      images: ['https://img01.yzcdn.cn/vant/cat.jpeg', 'https://img01.yzcdn.cn/vant/dog.jpeg'],
      likeCount: 128,
      commentCount: 32,
      createTime: '2小时前'
    },
    {
      id: 2,
      author: {
        id: 102,
        nickname: '户外摄影师',
        avatar: 'https://img01.yzcdn.cn/vant/dog.jpeg'
      },
      content: '星空下的帐篷，绝美！今晚在森林湖畔营地拍到的照片，分享给大家。',
      images: ['https://img01.yzcdn.cn/vant/apple-1.jpg'],
      likeCount: 256,
      commentCount: 64,
      createTime: '昨天'
    },
    {
      id: 3,
      author: {
        id: 103,
        nickname: '野炊专家',
        avatar: 'https://img01.yzcdn.cn/vant/apple-2.jpg'
      },
      content: '露营美食分享：如何在户外做一顿丰盛的晚餐。今天教大家野外烧烤的技巧！',
      images: ['https://img01.yzcdn.cn/vant/apple-3.jpg', 'https://img01.yzcdn.cn/vant/apple-4.jpg'],
      likeCount: 89,
      commentCount: 24,
      createTime: '3天前'
    }
  ]

  // 模拟数据 - 关注的人发布的笔记
  const followingPosts = [
    {
      id: 4,
      author: {
        id: 104,
        nickname: '张三',
        avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg'
      },
      content: '刚买了一套新的露营装备，周末准备去试试！',
      images: ['https://img01.yzcdn.cn/vant/apple-5.jpg'],
      likeCount: 45,
      commentCount: 12,
      createTime: '5小时前'
    },
    {
      id: 5,
      author: {
        id: 105,
        nickname: '李四',
        avatar: 'https://img01.yzcdn.cn/vant/dog.jpeg'
      },
      content: '今天去了星空营地，风景太棒了！强烈推荐给大家。',
      images: ['https://img01.yzcdn.cn/vant/apple-6.jpg', 'https://img01.yzcdn.cn/vant/apple-7.jpg'],
      likeCount: 78,
      commentCount: 18,
      createTime: '昨天'
    }
  ]

  const handleTabChange = (value) => {
    setActiveTab(value)
  }

  const handleSearch = (value) => {
    setSearchValue(value)
    // 这里可以添加搜索逻辑
    console.log('搜索:', value)
  }

  const renderPostItem = (post) => {
    return (
      <View className='post-item' key={post.id}>
        <View className='post-header'>
          <Image className='author-avatar' src={post.author.avatar} mode='aspectFill' />
          <View className='author-info'>
            <Text className='author-name'>{post.author.nickname}</Text>
            <Text className='post-time'>{post.createTime}</Text>
          </View>
        </View>
        
        <Text className='post-content'>{post.content}</Text>
        
        <View className={`post-images ${post.images.length === 1 ? 'single-image' : ''}`}>
          {post.images.map((image, index) => (
            <Image 
              key={index}
              className='post-image'
              src={image}
              mode='aspectFill'
            />
          ))}
        </View>
        
        <View className='post-footer'>
          <View className='post-action'>
            <Text className='action-icon'>👍</Text>
            <Text className='action-count'>{post.likeCount}</Text>
          </View>
          <View className='post-action'>
            <Text className='action-icon'>💬</Text>
            <Text className='action-count'>{post.commentCount}</Text>
          </View>
          <View className='post-action'>
            <Text className='action-icon'>🔗</Text>
            <Text className='action-count'>分享</Text>
          </View>
        </View>
      </View>
    )
  }

  return (
    <ConfigProvider>
      <View className='index-page'>
        <View className='search-bar'>
          <View className='search-input'>
            搜索露营笔记、营地 - 热更新了
          </View>
        </View>
        
        <Tabs 
          value={activeTab} 
          onChange={handleTabChange}
          className='index-tabs'
        >
          <TabPane title='热门推荐' value='0'>
            <ScrollView 
              className='post-list'
              scrollY
            >
              {recommendedPosts.map(post => renderPostItem(post))}
            </ScrollView>
          </TabPane>
          <TabPane title='我的关注' value='1'>
            <ScrollView 
              className='post-list'
              scrollY
            >
              {followingPosts.map(post => renderPostItem(post))}
            </ScrollView>
          </TabPane>
        </Tabs>
      </View>
    </ConfigProvider>
  )
}

export default Index
